<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{ list.length }}</strong></span>
    <ul class="filters">
      <li>
        <a :class="{selected: status == '全部'}" @click="changeStatus('全部')" href="javascript:;">全部</a>
      </li>
      <li>
        <a :class="{selected: status == '未完成'}" @click="changeStatus('未完成')" href="javascript:;">未完成</a>
      </li>
      <li>
        <a :class="{selected: status == '已完成'}" @click="changeStatus('已完成')" href="javascript:;">已完成</a>
      </li>
    </ul>
    <button @click="$emit('clear')" class="clear-completed">清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      status: '全部'
    }
  },
  methods: {
    changeStatus (status) {
      // 把被点状态传过来,存到变量
      this.status = status
      // 把被点的值告诉父组件
      this.$emit('changeStatus', status)
    }
  }
}
</script>
